<template>
  <div class="plan-list">
    <el-form :disabled="checkMode">
      <!-- 创建项目模式 -->
      <el-table :data="value" stripe @selection-change="selected">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column type="selection"></el-table-column>
        <el-table-column label="物料名称" width="200">
          <template slot-scope="scope">
            <el-input v-model="scope.row.detail.materialName"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="规格型号" width="200">
          <template slot-scope="scope">
            <el-input v-model="scope.row.detail.model"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="物料数量" width="110">
          <template slot-scope="scope">
            <el-input v-model="scope.row.detail.amount"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="*计量单位">
          <template slot-scope="scope">
            <el-select v-model="scope.row.detail.unit" @change="batchChange($event, 'detail.unit')">
              <el-option
                v-for="(unit, index) in dict.unit_list"
                :key="index"
                :label="unit.label"
                :value="unit.label"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="配置" width="200">
          <template slot-scope="scope">
            <el-input v-model="scope.row.detail.configuration"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="*交货地点" width="200">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.detail.deliveryPoints"
              @change="batchChange($event, 'detail.deliveryPoints')"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="应用系统" width="200">
          <template slot-scope="scope">
            <el-input v-model="scope.row.detail.applySystem"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="项目编号" width="200">
          <template slot-scope="scope">
            <el-input v-model="scope.row.detail.projectNumber"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="分摊部门" width="200">
          <template slot-scope="scope">
            <el-input v-model="scope.row.detail.allocatedDepart"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="备注" width="200">
          <template slot-scope="scope">
            <el-input v-model="scope.row.detail.comment"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="*交货日期" width="230">
          <template slot-scope="scope">
            <el-date-picker
              v-model="scope.row.detail.deliveryDate"
              value-format="timestamp"
              @change="batchChange($event, 'detail.deliveryDate')"
            ></el-date-picker>
          </template>
        </el-table-column>
        <el-table-column label="*税率" width="85">
          <template slot-scope="scope">
            <el-select v-model="scope.row.detail.tax" @change="batchChange($event, 'detail.tax')">
              <el-option
                v-for="item in TAX_RATE"
                :key="item"
                :value="item"
                :label="item"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </div>
</template>

<script>
  import { TAX_RATE } from '@/config';

  export default {
    name: 'PlanList',
    dicts: ['unit_list'],
    props: {
      value: {
        type: Array,
        default: () => [],
      },
      planBatchStatus: {
        type: Boolean,
        default: false,
      },
      checkMode: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        TAX_RATE,
        selectedData: [],
      };
    },

    methods: {
      /**
       * 批量修改
       */
      batchChange(value, type) {
        if (this.planBatchStatus) {
          this.value.forEach((plan, index) => {
            if (/^detail\..*/.test(type)) {
              this.$set(this.value[index]['detail'], type.replace(/^detail\./, ''), value);
            } else {
              this.$set(this.value[index], type, value);
            }
          });
        }
        this.$emit('input.value', this.value);
      },
      /**
       * 表格数据选择
       */
      selected(data) {
        this.selectedData = data.map((d) => d.id);
      },
    },
  };
</script>

<style lang="scss" scoped></style>
